import React, { PureComponent, Fragment } from 'react';
import { Row, Col, Form, Button, Input, Select, DatePicker, message } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

import styles from './YlybForm.less';

import moment from 'moment';
import { connect } from 'dva';

@connect(({ maintain, config, loading }) => ({
  yhdwList: maintain.yhdwList,
}))
class TjfxQueryForm extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {};
    this.dispatch = this.props.dispatch;
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleReset = this.handleReset.bind(this);
  }

  componentDidMount() {
    var p = this.props;
    this.props.form.setFields({
      year: {
        value: parseInt(moment().format('YYYY')),
      },
      department: {
        value: 'all',
      },
    });

    this.GetCompany({ type: '养护维修' });
  }

  /* 获取下拉框初始数据 */
  getYearSelectVal() {
    var curYear = parseInt(moment().format('YYYY'));
    var yearGroup = [];
    for (var i = curYear - 15; i < curYear; i++) {
      yearGroup.push(i);
    }
    for (var i = curYear; i < curYear + 15; i++) {
      yearGroup.push(i);
    }
    return yearGroup;
  }

  // 获取"养护单位"
  GetCompany = ({ type = null } = {}) => {
    this.dispatch({
      type: 'maintain/fetchGetCompany',
      payload: {
        type: type,
      },
      callback: response => {
        if (response.ErrorMessage) {
          message.error.error('获取失败');
          console.log(response.ErrorMessage);
        }
      },
    });
  };

  // 点击button
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.GetQueryData({
          year: values.year,
          department: values.department == 'all' ? '' : values.department,
          roadname: values.roadname == undefined ? '' : values.roadname,
        });
      }
    });
  };

  handleReset = () => {
    this.props.form.resetFields();
    this.props.form.setFields({
      year: {
        value: parseInt(moment().format('YYYY')),
      },
      department: {
        value: 'all',
      },
    });
    this.props.GetQueryData();
  };

  render() {
    var s = this.state;
    var p = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
    };
    var yearGroup = this.getYearSelectVal();
    const { yhdwList } = this.props;

    return (
      <Form
        className={styles.yhglQueyForm}
        style={{ padding: '10px 20px' }}
        onSubmit={this.handleSubmit}
        layout="inline"
      >
        <FormItem label="年份">
          {getFieldDecorator('year', {
            rules: [{ required: true, message: '请选择年份' }],
          })(
            <Select style={{ width: 150 }} placeholder="请选择年份">
              {yearGroup
                ? yearGroup.map(i => (
                    <Option key={i} value={i}>
                      {i}
                    </Option>
                  ))
                : null}
            </Select>
          )}
        </FormItem>

        <FormItem label="部门">
          {getFieldDecorator('department', {
            rules: [{ required: true, message: '请选择部门' }],
          })(
            <Select style={{ width: 150 }} placeholder="请选择部门">
              <option key={'all'} value={'all'}>
                全部
              </option>
              {yhdwList
                ? yhdwList.map(i => (
                    <Option key={i.Id} value={i.Id}>
                      {i.Name}
                    </Option>
                  ))
                : null}
            </Select>
          )}
        </FormItem>

        <FormItem label="路名">
          {getFieldDecorator('roadname')(<Input style={{ width: 150 }} placeholder="请输入路名" />)}
        </FormItem>

        <FormItem>
          <Button type="primary" htmlType="submit">
            确定
          </Button>
          <Button style={{ marginLeft: 10 }} onClick={this.handleReset}>
            重置
          </Button>
        </FormItem>
      </Form>
    );
  }
}

const TjfxQueryFm = Form.create()(TjfxQueryForm);
export default TjfxQueryFm;
